<script setup>
import { ref, watch, inject } from 'vue'
import { useRoute } from 'vue-router'

import NoticeButton from './NoticeButton.vue'
import ContactButton from './ContactButton.vue'

import IconNotice from '@/components/icons/IconNotice.vue'
import IconContact from '@/components/icons/IconContact.vue'
import IconHelp from '@/components/icons/IconHelp.vue'

const menus = inject('menus', [])
const navActive = ref('chat')
const route = useRoute()

const showContact = ref(__SITE_CONFIG__.showContact)

const isActive = (name) => {
  return typeof navActive.value === 'string' && navActive.value.substring(0, name.length) === name
}

watch(
  () => route.name,
  async (name) => (navActive.value = name)
)
</script>

<template>
  <div
    class="hidden sm:flex flex-col w-20 h-full text-center space-y-2 bg-[--el-bg-color] border-r-[1px] border-r-[--el-border-color] text-[--el-text-color-primary]"
  >
    <el-scrollbar class="flex-1 pt-3 px-2 h-full">
      <div class="flex flex-col justify-between h-full">
        <div class="flex-1">
          <template v-for="menu in menus">
            <RouterLink
              class="item"
              :class="{ active: isActive(menu.name) }"
              :to="{ name: menu.name }"
            >
              <FontAwesomeIcon size="xl" :icon="menu.icon" />
              <span>{{ menu.title }}</span>
            </RouterLink>
          </template>
        </div>
        <div class="mb-1">
          <NoticeButton>
            <button class="item mx-auto">
              <IconNotice :size="24" />
              <span>公告</span>
            </button>
          </NoticeButton>
          <ContactButton v-if="showContact">
            <button class="item mx-auto">
              <IconContact :size="24" />
              <span>客服</span>
            </button>
          </ContactButton>
          <RouterLink
            :class="[
              'item',
              'mx-auto',
              route.name?.substring(0, 4) === 'documentHelp' ? 'active2' : '',
            ]"
            :to="{ name: 'documentHelp' }"
          >
            <IconHelp :size="24" />
            <span>帮助</span>
          </RouterLink>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<style scoped>
:deep(.el-scrollbar__view) {
  height: 100%;
}

.item {
  @apply flex flex-col items-center py-2 rounded cursor-pointer space-y-0.5 
  hover:text-[--el-color-primary] text-[--el-text-color-primary];
}

.item.active {
  @apply bg-[--el-color-primary-light-8] text-[--el-color-primary];
}

.item.active2 {
  @apply text-[--el-color-primary];
}
</style>
